<template>
	<div id="content" style="height: 100%;">
		<el-row :gutter="20">
			<el-col :span="7" v-for="(item,index) in dataList1" :key="index"
				style="background: #fff;height: 180px;padding:20px;margin: 20px;cursor: pointer;border-radius: 16px;">
				<div v-if="index == 0">
					<div class="displayFlexBet" style="font-size: 16px;margin-bottom: 10px;">
						<div>概况</div>
						<div>{{item.year}}</div>
					</div>
					<div class="mb5">
						<div class="displayFlexBet" style="margin-bottom: 5px;font-size: 14px;">
							<div>产生</div>
							<div>
								<span style="color: #3a3ef4;font-weight: bold;">{{item.produceAmount}}</span>
								<span>吨</span>
							</div>
						</div>
						<div class="g-progress1" :style="{'--progress': item.produceAmountPre+'%'}"></div>
					</div>

					<div class="mb5">
						<div class="displayFlexBet" style="margin-bottom: 5px;font-size: 14px;">
							<div>处置</div>
							<div>
								<span style="color: #3a3ef4;font-weight: bold;">{{item.disposeAmount}}</span>
								<span>吨</span>
							</div>
						</div>
						<div class="g-progress2" :style="{'--progress': item.disposeAmountPre+'%'}"></div>
					</div>

					<div class="mb5">
						<div class="displayFlexBet" style="margin-bottom: 5px;font-size: 14px;">
							<div>在库</div>
							<div>
								<span style="color: #3a3ef4;font-weight: bold;">{{item.currentAmount}}</span>
								<span>吨</span>
							</div>
						</div>
						<div class="g-progress3" :style="{'--progress': item.currentAmountPre+'%'}"></div>
					</div>
				</div>

				<div v-else>
					<div>{{item.storageName}}</div>
					<div class="blockOut">
						<!-- 圆 -->
						<div class="block"></div>
						<div class="text">
							<div>
								<span style="font-size: 18px;color: #3a3ef4;font-weight: bold;">{{item.currentAmount}}</span>
								<span>吨</span>
							</div>
							<div style="font-size: 14px;">库存</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>

		<el-row :gutter="20">
			<el-col :span="7" v-for="(item,index) in dataList2" :key="index"
				style="background: #fff;height: 180px;padding:20px;margin: 20px;cursor: pointer;border-radius: 16px;">
				<div @click="gotoUrl(item)">
					<div class="mb5 displayFlexBet">
						<div>
							<span>{{item.wasteName}}</span>
							<span>{{item.wasteCode}}</span>
						</div>
						<div>{{item.year}}年度</div>
					</div>
					<div class="mb5">
						<div class="displayFlexBet" style="margin-bottom: 5px;font-size: 14px;">
							<div>产生</div>
							<div>
								<span style="color: #3a3ef4;font-weight: bold;">{{item.produceAmount}}</span>
								<span>吨</span>
							</div>
						</div>
						<div class="g-progress1" :style="{'--progress': item.produceAmountPre+'%'}"></div>
					</div>

					<div class="mb5">
						<div class="displayFlexBet" style="margin-bottom: 5px;font-size: 14px;">
							<div>处置</div>
							<div>
								<span style="color: #3a3ef4;font-weight: bold;">{{item.disposeAmount}}</span>
								<span>吨</span>
							</div>
						</div>
						<div class="g-progress2" :style="{'--progress': item.disposeAmountPre+'%'}"></div>
					</div>

					<div class="mb5">
						<div class="displayFlexBet" style="margin-bottom: 5px;font-size: 14px;">
							<div>在库</div>
							<div>
								<span style="color: #3a3ef4;font-weight: bold;">{{item.currentAmount}}</span>
								<span>吨</span>
							</div>
						</div>
						<div class="g-progress3" :style="{'--progress': item.currentAmountPre+'%'}"></div>
					</div>
				</div>
			</el-col>
		</el-row>


	</div>
</template>

<script>
	let that
	export default {
		components: {
		},
		data() {
			return {
				params: {
					facilitatorId: '',
					ticketId: '',
				},
				dataList1: [],
				dataList2: [],
				colors: [{
						color: '#f56c6c',
						percentage: 20
					},
					{
						color: '#e6a23c',
						percentage: 40
					},
					{
						color: '#5cb87a',
						percentage: 60
					},
					{
						color: '#1989fa',
						percentage: 80
					},
					{
						color: '#6f7ad3',
						percentage: 100
					}
				]
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token
			that.getStorageStandBookSimpleData()

		},
		methods: {

			gotoUrl(item) {
				that.$router.push('/waste/wasteOrderDet?ticketId=' + that.params.ticketId + "&wasteId=" + item.entWasteId +
					"&wasteName=" + item.wasteName + "&wasteCode=" +
					item.wasteCode)
			},

			getStorageStandBookSimpleData() {
				that.ajax({
					url: '/standBook/getStorageStandBookSimpleData?ticketId=' + that.params.ticketId,
					data: JSON.stringify({
						facilitatorId: that.params.facilitatorId
					}),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that.dataList1 = result.data
							for (let item of that.dataList1) {
								item.currentAmountStr = item.currentAmountStr || "0吨"
								item.produceAmountStr = item.produceAmountStr || "0吨"
								item.disposeAmountStr = item.disposeAmountStr || "0吨"

								item.currentAmount = Number(item.currentAmountStr.split("吨")[0])
								item.produceAmount = Number(item.produceAmountStr.split("吨")[0])
								item.disposeAmount = Number(item.disposeAmountStr.split("吨")[0])

								item.currentAmountPre = (item.currentAmount / item.currentAmount) * 100
								item.produceAmountPre = (item.produceAmount / item.currentAmount) * 100
								item.disposeAmountPre = (item.disposeAmount / item.currentAmount) * 100
							}
						}
						that.getWasteStandBookSimpleData()
					},
				})
			},

			getWasteStandBookSimpleData() {
				that.ajax({
					url: '/standBook/getWasteStandBookSimpleData?ticketId=' + that.params.ticketId,
					data: JSON.stringify({
						facilitatorId: that.params.facilitatorId
					}),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that.dataList2 = result.data

							for (let item of that.dataList2) {
								item.currentAmountStr = item.currentAmountStr || "0吨"
								item.produceAmountStr = item.produceAmountStr || "0吨"
								item.disposeAmountStr = item.disposeAmountStr || "0吨"

								item.currentAmount = Number(item.currentAmountStr.split("吨")[0])
								item.produceAmount = Number(item.produceAmountStr.split("吨")[0])
								item.disposeAmount = Number(item.disposeAmountStr.split("吨")[0])

								item.currentAmountPre = (item.currentAmount / item.currentAmount) * 100
								item.produceAmountPre = (item.produceAmount / item.currentAmount) * 100
								item.disposeAmountPre = (item.disposeAmount / item.currentAmount) * 100
							}
						}
					},
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@property --progress {
		syntax: '<percentage>';
		inherits: false;
		initial-value: 0%;
	}

	.g-progress1 {
		margin: auto;
		width: 100%;
		height: 10px;
		border-radius: 25px;
		background: linear-gradient(90deg, #4a94f2, #3a3ef4 var(--progress), transparent 0);
		border: 1px solid #eee;
		transition: .3s --progress;
	}

	.g-progress2 {
		margin: auto;
		width: 100%;
		height: 10px;
		border-radius: 25px;
		background: linear-gradient(90deg, #fad480, #ffb700 var(--progress), transparent 0);
		border: 1px solid #eee;
		transition: .3s --progress;
	}

	.g-progress3 {
		margin: auto;
		width: 100%;
		height: 10px;
		border-radius: 25px;
		background: linear-gradient(90deg, #7dc8b3, #00bc8a var(--progress), transparent 0);
		border: 1px solid #eee;
		transition: .3s --progress;
	}

	.blockOut {
		position: relative;
		width: 180px;
		height: 120px;
		overflow: hidden;
		margin: 0 auto;
	}

	.block {
		position: absolute;
		width: 180px;
		height: 180px;
		border: 20px solid#3a3ef4;
		border-radius: 50%;
		transform-origin: 50%;
		box-sizing: border-box;
	}

	/* .block::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  right: 0;
	  left: 0;
	  bottom: 0;
	  z-index: 1;
	  margin: -4px;
	  border-radius: inherit;
	  background: linear-gradient(to right, #8F41E9, #578AEF);
	} */

	.text {
		position: absolute;
		bottom: 17px;
		left: 0;
		right: 0;
		margin: 0;
		text-align: center;
		font-size: 16px;
		color: #333;
	}
</style>